<template>
  <contents class="wantBuy-form" :heightInclude="['navBar', 'tabBar']">
    <u-navbar
      :custom-back="back"
      :title="
        routerParams.id
          ? $t('locales.editPurchase')
          : $t('locales.publishPurchase')
      "
      title-color="#fff"
      back-icon-color="#fff"
      :background="{ background: '#0049AC' }"
    >
      <view
        v-if="active === 4"
        slot="right"
        class="navbar-btn"
        @click="onSuccess"
        >完成</view
      >
    </u-navbar>

    <Step1 v-if="active === 1" :value="form" @change="formChange" />
    <Step2
      v-if="active === 2"
      :value="form"
      :currencyList="currencyList"
      @change="formChange"
      @previous="onStepBack"
    />
    <Step3
      v-if="active === 3"
      :value="form"
      @change="onShowCheckSave"
      @previous="onStepBack"
    />
    <Step4 v-if="active === 4" :row="{ id: saveId }" />
  </contents>
</template>
<script>
import Step1 from './step/1.vue'
import Step2 from './step/2.vue'
import Step3 from './step/3.vue'
import Step4 from './step/success.vue'

import {
  purchaseSave,
  purchaseDetail,
  getEnterpriseInformation,
  getCurrencyList
} from '@/api/http/wantBuy'

export default {
  components: {
    Step1,
    Step2,
    Step3,
    Step4
  },
  data() {
    return {
      active: 1,
      form: {
        goodsName: '',
        label: '',
        brandName: '',
        unit: '',
        specificationsName: '',
        manufacturer: '',
        mainPic: '',
        picList: [],
        picUrlList: [],
        fileList: [],
        packingRequirement: '',
        description: '',

        purchaseType: '0',
        purchaseQty: '',
        expectedPrice: '',
        timeRemaining: '',
        isLongterm: '',
        isSample: '0',
        invoicesRequirement: '',
        currencyName: '',
        currencyId: '',

        enterpriseName: '',
        enterpriseContacts: '',
        enterprisePhone: '',
        country: '',
        countryId: '',
        prov: '',
        provId: '',
        city: '',
        cityId: '',
        enterpriseAddress: '',
        enterpriseId: ''
      },
      saveId: '',
      routerParams: {},
      currencyList: []
    }
  },
  onLoad(opt) {
    this.getEnterpriseInfo()
    this.getCurList()
    this.routerParams = opt
    if (opt.id) {
      this.getPageInfo()
    }
  },
  onShow() {
    uni.$on('onSetTemplate', (res) => {
      Object.keys(res).forEach((key) => {
        this.form[key] = res[key]
      })
      uni.$off('onSetTemplate')
    })
  },
  methods: {
    async getCurList() {
      const res = await getCurrencyList()
      if (res.code === 200) {
        this.currencyList = res.data
      }
    },

    async getEnterpriseInfo() {
      const res = await getEnterpriseInformation()
      if (res.code === 200) {
        if (res.data.enterpriseId !== 0) {
          Object.keys(res.data).forEach((key) => {
            this.form[key] = res.data[key]
          })
        }
      }
    },

    async getPageInfo() {
      const res = await purchaseDetail({
        id: this.routerParams.id
      })
      if (res.code === 200) {
        const val = res.data
        Object.keys(this.form).forEach((key) => {
          this.form[key] = val[key]
        })
        this.form.id = val.id
        this.form.fileList = res.data.picUrlList.map((item, index) => {
          return {
            url: item,
            objectName: res.data.picList[index]
          }
        })
      }
    },

    back() {
      if (this.active !== 4) {
        uni.showModal({
          title: '',
          content: this.$t('locales.leavePurchase'),
          confirmText: this.$t('locales.cancel'),
          cancelText: this.$t('locales.leave'),
          success: function (res) {
            if (res.cancel) {
              uni.navigateBack()
            }
          }
        })
      } else {
        uni.navigateBack()
      }
    },

    formChange(val) {
      Object.keys(val).forEach((key) => {
        this.form[key] = val[key]
      })
      this.active += 1
    },

    onStepBack(val) {
      Object.keys(val).forEach((key) => {
        this.form[key] = val[key]
      })
      this.active -= 1
    },

    onShowCheckSave(val) {
      uni.showModal({
        title: '',
        content: this.$t('locales.publishPurchaseMsg'),
        confirmText: this.$t('locales.determine'),
        cancelText: this.$t('locales.cancel'),
        success: (res) => {
          if (res.confirm) {
            this.save(val)
          }
        }
      })
    },

    async save(val) {
      Object.keys(val).forEach((key) => {
        this.form[key] = val[key]
      })

      // 如果是再次发布就不传id
      if (this.routerParams.again) {
        this.form.id = ''
      }

      const res = await purchaseSave({
        ...this.form
      })
      if (res.code === 200) {
        this.saveId = res.data
        this.active += 1
      } else {
        uni.showToast({
          icon: 'none',
          title: res.message
        })
      }
    },

    onSuccess() {
      uni.$emit('onRefresh', true)
      if (this.routerParams.id) {
        uni.navigateBack({
          delta: 2
        })
      } else {
        uni.navigateBack()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.wantBuy-form {
  .navbar-btn {
    color: #fff;
    padding: 10rpx 30rpx;
  }
}
</style>